<template>
  <div>
    <div class="Bbox">
      <div class="header">
        <h1>新型冠状肺炎实时监测</h1>
        <h4 class="time">当前时间:{{ time | filterTime }}</h4>
      </div>
      <div class="main">
        <div class="div1">
          <div class="left_top" ref="left_top"></div>
        </div>
        <div class="div1">
          <div class="left_top" ref="left_center"></div>
        </div>
        <div class="div1">
          <div class="left_top" ref="left_bottom"></div>
        </div>
        <div class="center_top">
         <div class="div2"><div class="center_top_one" ref="center_top" >
          <div class="m1">
                        <div class="shu">
                            <ul>
                                <li>217021468</li>
                                <li>46987153</li>
                                <li>165524088</li>
                                <li>4510227</li>
                            </ul>
                            <div class="jiao"></div>
                            <div class="jiao1"></div>
                        </div>
                        <div class="shu1">
                            <ul>
                                <li>累计确诊</li>
                                <li>现存确诊</li>
                                <li>累计治愈</li>
                                <li>累计死亡</li>
                            </ul>
                        </div>
                    </div>
                    <div class="m2">
                        <div class="lei">累计确诊</div>
                        <div class="xian">现存确诊</div>
                    </div>
         </div></div> 
         <div class="div3"><div class="center_top_two" ref="center_bottom"></div></div> 
        </div>
        <div class="div1">
          <div class="left_top" ref="right_top"></div>
        </div>
        <div class="div1">
          <div class="left_top" ref="right_center"></div>
        </div>
        <div class="div1">
          <div class="left_top" ref="right_bottom"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {datamap as word} from "../assets/world"
import { nameMap as name} from "../assets/nameMap(1)"
export default {
  data() {
    return {
      time: new Date().getTime(),
      map:word,
      name:name,
    };
  },
  computed: {
    // time() {},
  },
  mounted() {
    this.opentime();
    this.row();
  },
  methods: {
    opentime() {
      setInterval(() => {
        this.time = new Date().getTime();
      }, 1000);
    },
    row() {
      let charts1 = this.$echarts.init(this.$refs.left_top);
      let charts2 = this.$echarts.init(this.$refs.left_center)
      let charts3 = this.$echarts.init(this.$refs.left_bottom)
      let charts4 = this.$echarts.init(this.$refs.right_top)
      let charts5 = this.$echarts.init(this.$refs.right_center)
      let charts6 = this.$echarts.init(this.$refs.right_bottom)
      let charts8 = this.$echarts.init(this.$refs.center_bottom)
      let myColor = ['#0e7ddc', '#f57474', '#56d0e3', '#fee29e', '#8370f4']

      let option1 = {
        title: {
          text: "新增确诊TOP10",
          textAlign: "Auto",
          left: "center",
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "英国",
            "",
            "",
            "印度",
            "",
            "",
            "哥伦比亚",
            "",
            "",
            "马来西亚",
          ],
          axisLine: {
            show: false,
          },
        },
        grid: {
          width: "70%",
          height: "60%",
          left: "15%",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: 10,
            type: "bar",
            itemStyle: {
              borderRadius: 10,
              color: "#3189cf",
            },
            data: [
              40000, 38000, 35000, 30000, 25600, 25000, 19000, 12000, 12000,
              12000,
            ],
          },
        ],
      }
      let option2 = {
        title: {
          text: '大洲感染人数趋势图',
          textAlign: "Auto",
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: ['02/14', '04/11', '06/06', '08/01', '09/26', '11/21']
        },

        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 8,
            lineHeight: 60
          },
        },
        grid: {
          width: "70%",
          height: "50%",
          left: "18%",

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [33200000, 35320000, 39010000, 40340000, 8290000, 13330000],
            type: 'line',
            name: "北美洲",
            smooth: true
          },
          {
            data: [3320000, 3532000, 3901000, 4034000, 5290000, 1333000],
            type: 'line',
            name: "亚洲",
            smooth: true
          },
          {
            data: [2200000, 320000, 110000, 3340000, 590000, 2330000],
            type: 'line',
            name: "大洋洲",
            smooth: true
          },
          {
            data: [2300000, 3520000, 910000, 3040000, 2890000, 3330000],
            type: 'line',
            name: "欧洲",
            smooth: true
          },
          {
            data: [33200000, 35320000, 39010000, 40340000, 8290000, 13330000],
            type: 'line',
            name: "其他",
            smooth: true
          }
        ]
      }
      let option3 = {
        title: {
          text: '大洲感染人数饼状图',
          textAlign: "Auto",
          left: "center",
          textStyle: {
            color: '#fff'
          }

        },

        color: ['#1983e9', '#fe7475'],
        legend: {
          textStyle: {
            lineHeight: 380,
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['35%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '北美洲' },
              { value: 135, name: '欧洲' },
            ],

          }
        ]
      }
      let option4 = {
        title: {
          text: '主要疫情国家治愈率',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff'
          }
        },

        textStyle: {
          color: '#fff'
        },
        xAxis: {
          type: 'value',
          show: false
        },
        grid: {
          show: false,
          width: "70%",
          height: "50%",
          left: "15%",
        },
        yAxis: [
          {
            type: 'category',
            data: ['美国', '西班牙', '哥伦比亚', '英国', '意大利'],
            axisLine: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisTick: {
              show: false,
            }
          },
          {
            type: 'category',
            data: ['美国', '西班牙', '哥伦比亚', '英国', '意大利'],
            show: false,
            axisLine: {
              show: false
            }
          },

        ],
        series: [

          {
            type: 'bar',
            data: [150, 40, 350, 270, 420],
            barWidth: 13,
            yAxisIndex: 1,

            itemStyle: {
              borderRadius: 20,
              color: function (res) {
                return myColor[res.dataIndex]
              }
            },
            label: {
              show: true,
              color: '#fff',
              formatter: function (par) {
                return `${par.value/10} %`
              }
              // formatter:{c}
            }
          },
          {
            type: 'bar',
            data: [
              { name: '美国', value: 1000 },
              { name: '西班牙', value: 1000 },
              { name: '哥伦比亚', value:1000 },
              { name: '英国', value: 1000 },
              { name: '意大利', value: 1000 }
            ],
            itemStyle: {
              color: 'none',
              borderRadius: 20,
              borderColor: '#00c1de',
              borderWidth: 3,
            },
            yAxisIndex: 0,
          },
        ]

      }
      let option5 = {
        title: {
          text: '世界每周新增治愈和死亡人数',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff'
          },

        },
        color: ["#25938b", "#0184d8"],
        grid: {
          show: false,
          width: "75%",
          height: "50%",
          left: "20%",
        },
        legend: {
          textStyle: {
            lineHeight: 60,
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['06/09', '06/23', '07/07', '07/21', '08/04', '08/18', '09/01']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [30000000, 34000000, 35000000, 35200000, 35400000, 37650000, 41000000],
            name: '治愈人数',
            type: 'line',
            // areaStyle: {
            //   // color: {
            //   //   // type: 'linear',
            //   //   x: 0,
            //   //   y: 0,
            //   //   x2: 1,
            //   //   y2: 1,
            //   //   colorStops: [{
            //   //     offset: 0, color: '#00da7f'
            //   //   }, {
            //   //     offset: 1, color: 'transparent'
            //   //   }]
            //   // }

            // }
            areaStyle: {

                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#25938b' },
                        { offset: 0.5, color: '#91cc75' },
                        { offset: 1, color: 'transparent' }
                    ])

            }
          },
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            name: '死亡人数',
            type: 'line',
            areaStyle: {}
          }
        ]
      }
      let option6 = {
        title: {
          text: '境外输入病例top10省份',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: '#fff'
          },
         
        },
        
        grid: {
          show: false,
          width: "70%",
          height: "50%",
          left: "15%",
          top:'35%'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [10, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            // itemStyle: {
            //   borderRadius: 8
            // },
            data: [
              { value: 100, name: '上海' },
              { value: 58, name: '广东' },
              { value: 32, name: '黑龙江' },
              { value: 30, name: '四川' },
              { value: 28, name: '陕西' },
              { value: 26, name: '内蒙古' },
              { value: 22, name: '福建' },
              { value: 18, name: '北京' },
              { value: 15, name: '天津' },
              { value: 10, name: '广州' }
            ]
          }
        ]
      }
      let option8 = {
        series:[
          {
            type:'map',
            data:word,
            mapType:"world",
            name:name,
          }
        ],
        length:{}
      }
      charts1.setOption(option1);
      charts2.setOption(option2);
      charts3.setOption(option3);
      charts4.setOption(option4);
      charts5.setOption(option5);
      charts6.setOption(option6);
      charts8.setOption(option8);
    },
  },
  filters: {
    filterTime(value) {
      let time = new Date(value);
      let obj = {
        Mon: time.getMonth(),
        day: time.getDay(),
        hour: time.getHours(),
        min: time.getMinutes(),
        sec: time.getSeconds(),
      };
      let year = time.getFullYear();
      for (let i in obj) {
        obj[i] = obj[i] < 10 ? "0" + obj[i] : obj[i];
      }

      return `${year}年${obj.Mon}月${obj.day}日-${obj.hour}时:${obj.min}分:${obj.sec}秒`;
    },
  },
};
</script>
<style lang="less">
@font-face{
        font-family: myFont;
        src: url(../assets/$RIF3814.ttf);
    }
.Bbox {
  width: 100vw;
  height: 100vh;
  background: url(img/bg.a6333996.jpg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .header {
    text-align: center;
    line-height: 95px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    width: 100%;
    height: 95px;
    background: url(img/head_bg.eeff3da5.png) no-repeat;

    position: relative;

    .time {
      position: absolute;
      right: 60px;
      top: 0px;
    }
  }

  .main {
    width: 400px;
    height: 95vh;
    // background-color: red;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    .left_top {
      margin-top: 10px;
      width: 360px;
      height: 215px;
      // background-color: green;
      margin-left: 5px;
    }

    .center_top {
      width: 720px;
      margin-top: 10px;
      height: 600px;
      //   background-color: blue;
      margin-left: 5px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
       .center_top_one{
        width: 100%;
        height: 30%;
        // background-color: #FFF;
        margin-bottom: 2%;
       }
       .center_top_two{
        width: 100%;
        height: 100%;
        // background-color: #FFF;
        background-image: url(../views/img/jt.c268bab5.png);
        background-size: 100%;
       }
    }

    .div1 {
      // position: absolute;
      // top: 20px;
      // left: 20px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 3px;
      width: 360px;
      height: 215px;
      background: linear-gradient(to left, #4776ae, #4776ae) left top no-repeat,
        linear-gradient(to bottom, #4776ae, #4776ae) left top no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right top no-repeat,
        linear-gradient(to bottom, #4776ae, #4776ae) right top no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) left bottom no-repeat,
        linear-gradient(to bottom, #4776ae, #4776ae) left bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
      color: transparent
    }
    .div2{
       // position: absolute;
      // top: 20px;
      // left: 20px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 3px;
      width: 720px;
      height: 180px;
      background: linear-gradient(to left, #4776ae, #4776ae) left top no-repeat,
        linear-gradient(to bottom, #4776ae, #4776ae) left top no-repeat,
        // linear-gradient(to left, #4776ae, #4776ae) right top no-repeat,
        // linear-gradient(to bottom, #4776ae, #4776ae) right top no-repeat,
        // linear-gradient(to left, #4776ae, #4776ae) left bottom no-repeat,
        // linear-gradient(to bottom, #4776ae, #4776ae) left bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
      color: transparent
    }
   .div3{
      // position: absolute;
      // top: 20px;
      // left: 20px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 3px;
      width: 720px;
      height: 408px;
      background: linear-gradient(to left, #4776ae, #4776ae) left top no-repeat,
        linear-gradient(to bottom, #4776ae, #4776ae) left top no-repeat,
        // linear-gradient(to left, #4776ae, #4776ae) right top no-repeat,
        // linear-gradient(to bottom, #4776ae, #4776ae) right top no-repeat,
        // linear-gradient(to left, #4776ae, #4776ae) left bottom no-repeat,
        // linear-gradient(to bottom, #4776ae, #4776ae) left bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat,
        linear-gradient(to left, #4776ae, #4776ae) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
      color: transparent
   }
    .canvas {
      width: 375px;
    }
  }
}
.center_top_one {
                width: 100%;
                height: 30%;
                // background-color: aqua;

                .m1 {
                    width: 100%;
                    height: 65%;
                    // background-color: beige;
                    box-sizing: border-box;
                    padding-top: 8px;
                    background-color: rgba(10,29,101,0.7);
                    .shu {
                        width: 94%;
                        height: 50px;
                        border: 1px solid red;
                        margin-left: 17px;
                        margin-top: 40px;
                        position: relative;
                        border: 1px solid rgb(5, 46, 96);

                        ul{
                            display: flex;
                            justify-content: space-around;
                            // margin-bottom: 50px;
                        }
                        li{
                            list-style: none;
                            color: rgb(253,235,132);
                            font-family: myFont;
                            margin-top: 5px;
                            // margin-left: -30px;
                            margin: 3px;
                            font-size: 35px;
                            font-weight: 800;
                            padding-right: 5px;
                            border-right: 1px solid rgb(8, 76, 159);
                        }
                    }

                    .shu1 {
                        width: 94%;
                        height: 25%;
                        // border: 1px solid red;
                        margin-left: 17px;
                        color: white;
                        ul {
                            display: flex;
                            justify-content: space-around;
                            box-sizing: border-box;
                            margin-top: 5px;
                        }
                        li {
                            list-style: none;
                        }
                    }
                }
                .m2{
                    // background-color: aqua;
                    margin-top: 145px;
                    display: flex;
                    justify-content: space-around;
                    .lei{
                        width: 120px;
                        height: 40px;
                        color: white;
                       background: rgba(23,58,133,0.7);
                        text-align: center;
                        line-height: 40px;
                        border-radius: 30px 30px 30px 30px;
                    }
                    .lei:hover{
                        color: rgb(224, 203, 85);
                        cursor: pointer;
                    }
                    .xian{
                        width: 120px;
                        height: 40px;
                        color: rgb(224, 203, 85);
                       background: rgba(23,58,133,0.7);
                        text-align: center;
                        line-height: 40px;
                        border-radius: 30px 30px 30px 30px;
                        cursor: pointer;
                    }
                }
            }
</style>